<template>
  <div class="goods-detail">
    <Row :gutter="32">
      <Col span="8">
        <img :src="'http://localhost:3000' + goods.img" alt="" class="img" v-if="goods.img" />
        <img :src="'http://localhost:3000' + goods.img" alt="" class="img-sm" v-if="goods.img" />
      </Col>
      <Col class="info">
        <div>
          <h1 class="title">{{ goods.title }}</h1>
          <h2>简介：</h2>
          <div class="price">{{ goods.desc }}</div>
          <h2>价格：</h2>
          <div class="price">￥{{ goods.price }}</div>
        </div>
        <div>
          <div class="handle">
            <Icon type="md-remove" @click="min" size="24" />
            <span style="margin:0 20px;font-size:18px;">{{ num }}</span>
            <Icon type="md-add" @click="add" size="24" />
          </div>
          <div>
            <button @click="buy" class="btn-info">加入购物车</button
            ><button class="btn" @click="buyim" type="primary" style="margin-left:20px;">立即购买</button class="btn">
          </div>
        </div></Col
      >
    </Row>
  </div>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      num: 1
    };
  },
  methods: {
    buy() {
      this.$api.cart.add(this.goods.id,this.num).then(() => {
        this.$toast.success("加入购物车");
        this.$store.dispatch("updateCartNum");
      });
    },
    buyim() {
      this.$api.cart.add(this.goods.id,this.num).then(() => {
        this.$toast.success("加入购物车");
        this.$store.dispatch("updateCartNum");
        this.$router.push("/cart");
      });
    },
    add() {
      this.num = this.num + 1;
    },
    min() {
      this.num > 1 && (this.num = this.num - 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-detail {
  color: #933;
  .img {
    width: 280px;
    height: 280px;
    margin-left: -10px;
  }
  .img-sm {
    width: 60px;
    height: 60px;
    margin: 0 auto;
  }
  .price {
    margin: 20px 0;
  }
  h2 {
    border-bottom: 1px solid #933;
  }
  .pucharse {
    height: 40px;
    padding: 5px 13px;
    display: inline-block;
  }
  .handle {
    margin-bottom: 20px;
    border: 1px solid #933;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
  }
  .info {
    display: flex;
    height: 300px;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;
    & > * {
      margin-bottom: 15px;
    }
  }
}
</style>
